<template>
	<view class="container">
		<view v-show="login">
			<view v-if="dataList.length!=0">
				<checkbox-group @change="buyChange">
					
					
					<view class="comment"  v-for="(item,index) in dataList" :key="index">
						<view class="head"  @click="to(item)">
							<view class="head_content">
								<u-avatar :src="item.memberIcon" size="mini"></u-avatar>
								<text class="head_content_text">{{item.memberNickName}}</text>
								<u-rate :count="count" v-model="item.star" :gutter="5" disabled></u-rate>
							</view>
							<view class="head_date">{{item.createTime}}</view>
						</view>
						<view class="nav"  @click="to(item)">
							<view class="nav_title"> {{item.content}}</view>
							<view class="nav_img" >
								<u-image class="nav_img_image" width="200rpx" height="200rpx" v-for="(pic,i) in item.pics" :key="i" :src="pic"></u-image>
							</view>
						</view>
					
						<!--商品列表-->
					</view>
					<!--加载loadding-->
					<tui-loadmore v-if="loadding" :index="3" type="primary"></tui-loadmore>
					<tui-nomore v-if="!pullUpOn" backgroundColor="#f2f2f2"></tui-nomore>
					<!--加载loadding-->

				</checkbox-group>

			
			</view>
			<tui-no-data v-else :fixed="false" imgUrl="/static/img/toast/img_nodata.png">暂无数据</tui-no-data>
		</view>
		<view v-show="!login" class="login">
			<u-empty text="请登录" mode="permission"></u-empty>
		</view>
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!-- 模态框 -->
		<u-modal v-model="del_show" content="是否删除" @confirm="del_shows()" :show-cancel-button="true"> </u-modal>

		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		<failTimeout v-show="failTimeout"></failTimeout>
	</view>
</template>

<script>
	import PmsPortalCommentController from '../../api/PmsPortalCommentController.js'
	import {formatDate} from '../../utils/date.js'
	export default {
		data() {
			return {
				failTimeout:false,
				dataList: [
					// 	{
					// 	id: "t2020003120",
					// 	quantity: 2,
					// 	price: 299.5,
					// 	selected: false
					// },
				],
				isAll: false,
				totalPrice: 0,
				quantity: 0,
				cartIds: [], //购物车id
				actions: [{
						name: '收藏',
						width: 64,
						color: '#fff',
						fontsize: 28,
						background: '#FFC600'
					},
					{
						name: '看相似',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#FF7035'
					},
					{
						name: '删除',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#F82400'
					}
				],
				actions2: [{
						name: '看相似',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#FF7035'
					},
					{
						name: '删除',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#F82400'
					}
				],
				isEdit: false,

				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				login: true,
				invalidList: [], //无效的购物车商品
				del_show: false,
				pageNum: 0,
			}
		},
		onLoad() {

		},
		async onShow() {
			this.dataList = [];
			this.pageNum = 0
			this.pullUpOn=true;
			await this.list();
			this.isAll = false;
			
		},
		filters: {
			getPrice(price) {
				price = price || 0;
				return price.toFixed(2)
			}
		},
		methods: {
			async list() {
				if(this.pullUpOn){
				this.invalidList = [];
				this.pageNum++
				await PmsPortalCommentController.listByMenberId(this.pageNum, 15).then(res => {
					if (res.data.code == 200) {

						res.data.data.forEach(e => {
							e.createTime = formatDate(new Date(e.createTime), 'yyyy-MM-dd')
							if(e.pics!=''&&e.pics!=null&&e.pics!='undefined'){
								e.pics = e.pics.split(',')
							}
							
							e.selected = false;	
							this.dataList.push(e)
						})
						if(res.data.data.length==0||res.data.data.length!=15){
							this.pullUpOn=false;
						}
						this.loadding=false;
					} else if (res.data.code == 401) {
						this.login = false;
					}
				}).catch(err => {
					if(err.errMsg=='request:fail timeout'){
						this.failTimeout=true
					}
				})
				}
			},
			calcHandle() {
				let quantity = 0;
				let totalPrice = 0;
				let selectedNum = 0;
				this.dataList.map((item) => {
					if (item.selected) {
						quantity += item.quantity;
						totalPrice += item.price * item.quantity;
						selectedNum++
					}
				})
				this.isAll = selectedNum === this.dataList.length

				this.quantity = quantity
				this.totalPrice = totalPrice
			},
			editGoods: function() {
				this.isEdit = !this.isEdit;
			},
			detail(productId) {
				if (!this.isEdit) {
					uni.navigateTo({
						url: '../goodsDetails/goodsDetails?id=' + productId
					})
				}

			},
			buyChange(e) {
				this.cartIds = e.detail.value;
				this.dataList.map(item => {
					//如果购物车id为数字统一转成字符串
					if (~this.cartIds.indexOf(item.id.toString())) {
						item.selected = true;
					} else {
						item.selected = false;
					}
				})
				setTimeout(() => {
					this.calcHandle()
				}, 0)
			},
			
			to(item){
				uni.navigateTo({
					url:'../commentReply/commentReply?commentId='+item.id
				})
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onPullDownRefresh: function() {
			this.pageIndex = 1;
			this.pullUpOn = true;
			this.loadding = false
			uni.stopPullDownRefresh()
		},
		onReachBottom: function() {
			if (this.pullUpOn) {
				this.loadding = true;
				this.list()
			}

		},
	}
</script>

<style scoped>
	.login {
		margin-top: 150upx;
	}
</style>
<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style scoped>
	.comment {
		background: white;
		padding: 22rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		border-bottom: 1px solid #dcdcdc;
	}

	.comment .head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.comment .head .head_content {
		display: flex;
		align-items: center;
	}

	.head_content_text {
		max-width: 310rpx;
		margin: 0 10rpx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/

	}

	.nav {}

	.nav .nav_img {
		display: flex;
		flex-wrap: wrap;
	}

	.nav .nav_title {
		margin: 10rpx 0;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		/** 显示的行数 **/
	}

	.nav .nav_img .nav_img_image {
		margin: 10rpx 20rpx 0 0;
	}

	.reply {
		margin-top: 10rpx;
		text-align: end;
		color: #3985ff;
		margin-right: 10rpx;
	}
</style>

